<template>
  <div class="page-content">
    <div class="header">
      <h3>专项练习</h3>
    </div>

    <el-tabs v-model="categoryId" class="demo-tabs" @tab-change="handleTabChange">
      <el-tab-pane label="科目一" :name="1"></el-tab-pane>
      <el-tab-pane label="科目四" :name="4"></el-tab-pane>
      <el-tab-pane label="注销恢复" :name="5"></el-tab-pane>
      <el-tab-pane label="满分学习" :name="6"></el-tab-pane>
    </el-tabs>

    <div class="question-group">
      <div class="left">
        <question-menu :tree-data="tableData[0]?.children" question-type="05" :default-active="defaultGroupId"
          @add-parent="addCategory" @select="questionDetail" @add="handleAddChild" @edit="handleEdit" @copy="handleCopy"
          @delete="handleDeleteChild"></question-menu>
      </div>
      <div class="right">
        <div class="header">
          <h3>已选题库</h3>
          <p v-if="carModelInfo">（{{ carModelInfo }}）</p>
          <p style="margin-left: 10px;" v-if="showStatus">{{ statusText === 0 ? '停用' : '启用' }}</p>
        </div>
        <select-question-detail :key="selectQuestionKey" :edit-info="editData" @upload-group="getData"
          :category-id="categoryId" :sync-data="syncData"></select-question-detail>
      </div>
    </div>
    <add-parent-node-dialog v-if="showAddParentDialog" :show-add-parent-dialog="showAddParentDialog"
      :edit-info="editData" @close-dialog="handleCloseAddParent"></add-parent-node-dialog>

    <add-child-node-dialog v-if="showAddChildDialog" :show-add-child-dialog="showAddChildDialog" :edit-info="editData"
      :opera-type="operaTypeValue" @close-dialog="handleCloseAddChild"></add-child-node-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getcategoryList, operationCategory } from '@/api/questionbanklabel'
import SelectQuestionDetail from './components/selectQuestionDetail.vue'
import addParentNodeDialog from './components/addParentNodeDialog.vue'
import addChildNodeDialog from './components/addChildNodeDialog.vue'
import { ElMessageBox } from 'element-plus'
import QuestionMenu from './components/QuestionMenu.vue'

interface User {
  id: number | string
  name: string
  img: string
  parentId?: string | number
  questionCount?: number
  children?: User[]
}

const showQuestionDetailVisible = ref(false)
const showAddParentDialog = ref(false)
const showAddChildDialog = ref(false)
const editData = ref<any>()
const operaTypeValue = ref('add')
const tableLoading = ref(false)
const selectQuestionKey = ref(1)
const categoryId = ref(1)
const carModelInfo = ref('')
const defaultGroupId = ref('')
const statusText = ref(0)

const tableData = ref<User[]>([])

function questionDetail(item: any) {
  statusText.value = item.status
  showQuestionDetailVisible.value = true
  editData.value = JSON.parse(JSON.stringify(item))
  selectQuestionKey.value = new Date().getTime()
  carModelInfo.value = item.carModelList.map((_item: any) => _item.carName).join(',')
}

function addCategory() {
  showAddParentDialog.value = true
  editData.value = {
    id: '',
    pageUrlType: '05',
    categoryIds: categoryId.value,
    parentId: tableData.value[0]?.id
  }
}

function handleAddChild(item: User) {
  if (item.children?.length === 0 && item.questionCount !== 0) {
    ElMessage.info('此分类已添加题目，无法添加子类')
    return
  }

  showAddChildDialog.value = true
  operaTypeValue.value = 'add'
  editData.value = JSON.parse(JSON.stringify(item))
}

function handleCloseAddParent(value: boolean) {
  showAddParentDialog.value = false
  if (value) {
    getData()
  }
}

function handleCloseAddChild(value: boolean, status: number) {
  showAddChildDialog.value = false
  if (value) {
    statusText.value = status
    getData()
  }
}

function handleEdit(item: User) {
  if (item.parentId === '0') {
    showAddParentDialog.value = true
  } else {
    showAddChildDialog.value = true
    operaTypeValue.value = 'edit'
  }
  editData.value = JSON.parse(JSON.stringify(item))
}

function handleDeleteChild(item: User) {
  ElMessageBox.confirm('确定删除该分类吗？', '确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    handleDelete(String(item.id))
  })
}

async function handleDelete(id: string) {
  const res = await operationCategory.deleteCategory(id)
  if (res.code === '00000') {
    await getData()
    selectQuestionKey.value = new Date().getTime()
  }
}

async function handleTabChange() {
  editData.value = { id: '' }
  selectQuestionKey.value = new Date().getTime()
  await getData()
  if (tableData.value.length > 0) {
    let child = tableData.value[0]
    if (child.children && child.children.length > 0) {
      let item: any = child.children[0]
      defaultGroupId.value = item.id
      editData.value = JSON.parse(JSON.stringify(item))
      selectQuestionKey.value = new Date().getTime()
      carModelInfo.value = item.carModelList.map((_item: any) => _item.carName).join(',')
    }
  }
}

const syncData = ref({})
async function getData() {
  try {
    tableLoading.value = true
    const res = await getcategoryList.getNewCateGoryId({
      pageNum: 1,
      pageSize: 1000,
      pageUrlType: '05',
      categoryIds: categoryId.value
    })
    if (res.code === '00000') {
      tableData.value = res.data.list
      syncData.value = res.data.list[0]
    }
  } catch (e) {
  } finally {
    tableLoading.value = false
  }
}

async function handleCopy(item: User) {
  const res = await operationCategory.copyGroup(Number(item.id))
  if (res.code === '00000') {
    await getData()
  }
}

const showStatus = ref(false)
onMounted(async () => {
  await getData()

  if (tableData.value.length > 0) {
    let child = tableData.value[0]
    if (child.children && child.children.length > 0) {
      const showStatus = true
      let item: any = child.children[0]
      defaultGroupId.value = item.id
      statusText.value = item.status
      editData.value = JSON.parse(JSON.stringify(item))
      selectQuestionKey.value = new Date().getTime()
      carModelInfo.value = item.carModelList.map((_item: any) => _item.carName).join(',')
    }
  }
})
</script>

<style lang="scss" scoped>
::v-deep(.row-parent) {
  background-color: #f4f6f8;
}

::v-deep(.row-child) {
  background-color: #fff;
}

.drag-over-line {
  position: absolute;
  height: 2px;
  background-color: #409eff;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
}

.icon-drag {
  color: var(--el-color-primary);
  margin-right: 10px;
  cursor: move;
}

.icon-rotate {
  color: var(--el-color-primary);
  display: inline-block;
}

.icon {
  margin-right: 10px;
  margin-bottom: -6px;
}

.child-drag {
  padding-left: 45px;
}

.page-content {
  .header {
    margin-bottom: 20px;
  }
}

.question-group {
  display: flex;
  width: 100%;

  .left {
    width: 300px;
    margin-right: 20px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
  }

  .right {
    flex: 1;
    height: 100%;
    overflow-x: auto;

    .header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      p {
        margin-left: 2px;
        font-size: 12px;
      }
    }
  }
}
</style>
